<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信，一种生活方式</title>
</head>
<link rel="stylesheet" href="CSS/index.css" />
<body>
    <!-- 头部开始 -->
    <div class="top">
        <!-- 头部导航栏开始 -->
        <div class="bx">
            <!-- 1.确定结构 -->
            <a href="#" class="logo"><img src="images/logo.png" alt="微信logo"  /></a>
            <ul class="nav">
                <li><a href="#"><span>首页</span></a></li>
                <li><a href="#"><span>帮助与反馈</span></a></li>
                <li><a href="#"><span>公众平台</span></a></li>
                <li><a href="#"><span>开放平台</span></a></li>
                <li><a href="#"><span>微信支付</span></a></li>
                <li><a href="#"><span>微信网页版</span></a></li>
                <li><a href="#"><span>表情开放平台</span></a></li>
                <li><a href="#"><span>微信广告</span></a></li>
            </ul>
        </div>
        <!-- 头部导航栏结束 -->
        <!-- banner开始 -->
        <div class="banner">
            <div class="left">
                <h2>微信，是一个生活方式</h2>
                <p>超过十亿人使用的手机应用</p>
                <p>支持发送语音短信、视频、图片和文字</p>
                <p>可以群聊，仅耗少量流量，适合大部分智能手机</p>
                <a href="#"><img src="images/download.png" alt="下载微信"></a>
                <ul>
                    <li><a href="#">忘记了微信帐号或密码？</a></li>
                    <li><a href="#">自助解除登录或功能限制</a></li>
                    <li><a href="#">冻结或解冻微信帐号</a></li>
                </ul>
            </div>
            <div class="right">
                <img src="images/show.png" />
                <div class="d_txt">
                    <h3>微信 for iOS / Android</h3>
                    <a href="#">iOS 6.7.3</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="#">Android 6.7.3</a>
                </div>
                <div class="dot">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
                <a href="#" class="l"></a>
                <a href="#" class="r"></a>
            </div>
        </div>
        <!-- banner结束 -->
    </div>
    <!-- 头部结束 -->
    <!-- main开始 -->
    <div class="main bx">
        <div class="left">
            <div>
                <img src="images/main_l.png" />
                <h4>微信网页版</h4>
                <p>扫一扫二维码
                    <br>
                    就能在浏览器上使用微信
                </p>
                <a href="#">了解更多</a>
            </div>
            <div>
                <img src="images/main_c.png" />
                <h4>微信 Mac 版</h4>
                <p>
                    极致简洁，迅捷沟通
                </p>
                <a href="#">了解更多</a>
            </div>
            <div>
                <img src="images/main_r.png" />
                <h4>微信 Windows 版</h4>
                <p>
                    让沟通更方便
                </p>
                <a href="#">了解更多</a>
            </div>
        </div>
        <div class="right">
            <h4>最新消息</h4>
            <ul>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
                <li>
                    <a href="#">微信 2.6.5 for Windows 正式版发布</a><i>(New)</i>
                    <span>11-12</span>
                </li>
            </ul>
            <div class="main_b">
                <a href="#">查看更多</a>
                <br />
                <br />
                <img src="images/qipao.png" />
                &nbsp;
                <a href="#" class="call_me">联系我们</a>
            </div>
        </div>
    </div>
    <!-- main结束 -->
    <!-- footer开始 -->
    <div class="footer bx">
        <div class="f_left">
            <ul>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
            </ul>
            <p>© 1998 - 2018 Tencent Inc. All Rights Reserved</p>
        </div>
        <div class="f_right">
            <ul>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
                <li class="v_line"></li>
                <li><a href="#">关于腾讯</a></li>
                &nbsp;
            </ul>
        </div>
    </div>
    <!-- footer开始 -->
</body>
</html>